<template>
  <view class="time-analysis-container">
    <!-- 导航栏 -->
    <nav-bar></nav-bar>
    <!-- 顶部导航栏 -->
    <view class="custom-nav-bar">
      <view class="left" @tap="goBack">
        <text class="iconfont icon-back"></text>
      </view>
      <view class="center"></view>
      <view class="right">
        <text class="modify-btn" @tap="goToTimeSettings">修改忙时</text>
      </view>
    </view>

    <!-- 图例说明 -->
    <view class="legend-section">
      <view class="legend-item">
        <view class="color-block platform"></view>
        <text>平台订单</text>
      </view>
      <view class="legend-item">
        <view class="color-block personal"></view>
        <text>我的订单</text>
      </view>
    </view>

    <!-- 时段分布列表 -->
    <scroll-view class="time-list" scroll-y>
      <view class="time-item" v-for="(item, index) in timeData" :key="index">
        <text class="time-label">{{ item.time }}</text>
        <view class="distribution-bars">
          <view class="platform-bar" :style="{ width: item.platformPercentage + '%' }">
            <text v-if="item.platformPercentage > 0">{{ item.platformPercentage }}%</text>
          </view>
          <view class="personal-bar" :style="{ width: item.personalPercentage + '%' }">
            <text v-if="item.personalPercentage > 0">{{ item.personalPercentage }}%</text>
          </view>
        </view>
      </view>
    </scroll-view>

    <!-- 底部提示 -->
    <view class="bottom-tips">
      <text>数据统计仅供参考，建议根据实际情况合理安排工作时间</text>
    </view>
  </view>
</template>

<script>
import NavBar from '@/components/nav-bar/nav-bar.vue'
export default {
	components: {
		NavBar
	},
  data() {
    return {
      timeData: [
        { time: '00:00', platformPercentage: 1.55, personalPercentage: 0 },
        { time: '01:00', platformPercentage: 0.87, personalPercentage: 0 },
        { time: '02:00', platformPercentage: 0.69, personalPercentage: 0 },
        { time: '03:00', platformPercentage: 0.27, personalPercentage: 0 },
        { time: '04:00', platformPercentage: 0.27, personalPercentage: 0 },
        { time: '05:00', platformPercentage: 0.44, personalPercentage: 0 },
        { time: '06:00', platformPercentage: 1.00, personalPercentage: 0 },
        { time: '07:00', platformPercentage: 3.00, personalPercentage: 0 },
        { time: '08:00', platformPercentage: 5.62, personalPercentage: 0 },
        { time: '09:00', platformPercentage: 7.93, personalPercentage: 0 },
        { time: '10:00', platformPercentage: 8.88, personalPercentage: 0 },
        { time: '11:00', platformPercentage: 7.68, personalPercentage: 0 },
        { time: '12:00', platformPercentage: 7.79, personalPercentage: 0 }
      ]
    }
  },

  onLoad() {
    this.loadTimeDistribution()
  },

  methods: {
    goBack() {
      uni.navigateBack()
    },

    goToTimeSettings() {
      uni.navigateTo({
        url: '/pages/technician/time'
      })
    },

    async loadTimeDistribution() {
      try {
        const result = await uni.request({
          url: `${uni.$config.baseUrl}/member/time-distribution`,
          method: 'GET',
          header: {
            'Authorization': uni.getStorageSync('token')
          }
        })

        if (result.data.code === 200) {
          this.timeData = result.data.data
        }
      } catch (err) {
        uni.showToast({
          title: '加载失败',
          icon: 'none'
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.time-analysis-container {
  min-height: 100vh;
  background: #FFFFFF;
  padding-bottom: 30rpx;

  .custom-nav-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 88rpx;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    padding: 0 30rpx;
    z-index: 100;
    
    .left {
      width: 88rpx;
      display: flex;
      align-items: center;
      
      .iconfont {
        font-size: 36rpx;
        color: #333333;
      }
    }
    
    .center {
      flex: 1;
      text-align: center;
      font-size: 32rpx;
      color: #333333;
      font-weight: 500;
    }
    
    .right {
      width: 140rpx;
      display: flex;
      justify-content: flex-end;

      .modify-btn {
        font-size: 28rpx;
        color: #2B85E4;
      }
    }
  }

  .legend-section {
    margin-top: 108rpx;
    padding: 20rpx 30rpx;
    display: flex;
    align-items: center;
    gap: 40rpx;
    border-bottom: 1rpx solid #F5F5F5;

    .legend-item {
      display: flex;
      align-items: center;
      gap: 10rpx;

      .color-block {
        width: 24rpx;
        height: 24rpx;
        border-radius: 4rpx;

        &.platform {
          background: #00C6B9;
        }

        &.personal {
          background: #FF6B6B;
        }
      }

      text {
        font-size: 24rpx;
        color: #666666;
      }
    }
  }

  .time-list {
    height: calc(100vh - 250rpx);
    padding: 0 30rpx;

    .time-item {
      display: flex;
      align-items: center;
      padding: 20rpx 0;
      
      .time-label {
        width: 100rpx;
        font-size: 28rpx;
        color: #333333;
      }

      .distribution-bars {
        flex: 1;
        margin-left: 20rpx;
        position: relative;

        .platform-bar, .personal-bar {
          height: 32rpx;
          border-radius: 16rpx;
          display: flex;
          align-items: center;
          padding: 0 16rpx;
          transition: width 0.3s ease;

          text {
            font-size: 24rpx;
            color: #FFFFFF;
            white-space: nowrap;
          }
        }

        .platform-bar {
          background: #00C6B9;
          margin-bottom: 8rpx;
        }

        .personal-bar {
          background: #FF6B6B;
        }
      }
    }
  }

  .bottom-tips {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20rpx 30rpx;
    background: #FFFFFF;
    text-align: center;

    text {
      font-size: 24rpx;
      color: #999999;
    }
  }
}
</style> 